<script setup lang="ts">
const contacts = [
  {
    title: '客户服务',
    items: [
      '服务热线：400-800-1234',
      '电子邮件：service@sansure.com'
    ]
  },
  {
    title: '公司地址',
    items: [
      '中国湖南省长沙市高新开发区',
      '麓松路782号'
    ]
  },
  {
    title: '关注我们',
    items: [
      '微信公众号：三诺生物',
      '领英官方账号'
    ]
  }
]

const items = [
    '走进圣湖',
    '产品中心',
    '研发实力',
    '服务中心',
    '人力资源',
    '投资者关系',
    '联系我们',
];
</script>

<template>
  <footer class="contact-footer">
    <div class="footer-content">
      <div class="left_content">
        <div class="left_top_nav">
          <a class="item"  v-for="(item, index) in items" :key="index">{{item}}<i class="line"></i></a>
        </div>
        <div class="left_bottom_item">
          <div class="inline_item">服务热线：400-871-6677</div>
          <div class="inline_item">总机：0731-8888 3176</div>
        </div>
        <div class="left_bottom_item">
          <div >圣湘长沙：湖南省长沙高新区麓松路680号</div>
          <div >圣湘上海：上海市闵行区华西路680号</div>
        </div>
      </div>
    </div>
    <div class="copyright">
      © 2024 三诺生物传感股份有限公司 湘ICP备12345678号
    </div>
  </footer>
</template>

<style scoped lang="scss">
@use "@/styles/_variables.scss" as variables;

.contact-footer {
  background: variables.$sansure-dark;
  color: white;
  padding: 3rem 5%;

  .footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  h3 {
    color: $sansure-blue;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
  }

  ul {
    list-style: none;
    padding: 0;
    
    li {
      margin-bottom: 0.8rem;
      opacity: 0.9;
    }
  }

  .left_top_nav {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .item {
    font-size: 1.2rem;
  }
  .item:last-child i{
    display: none;
  }
  .line {
    display: inline-block;
    width: 2px;
    height: 10px;
    margin-left: 25px;
    margin-right: 25px;
    background-color: red;
  }
.inline_item{
  display: inline-block;
  margin-right: 30px;
}
  .copyright {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    opacity: 0.8;
  }
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr !important;
  }
}
</style>